<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>当日分时交易量统计</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f7fa;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
        }
        .chart-container {
            height: 500px;
            margin-bottom: 20px;
        }
        .controls {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 20px;
        }
        button {
            padding: 8px 16px;
            background-color: #4a7bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #3a6be8;
        }
        .status {
            text-align: center;
            margin-top: 15px;
            color: #666;
            font-size: 14px;
        }
        .data-zoom-info {
            text-align: center;
            margin-top: 10px;
            color: #999;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>当日分时交易量统计（10分钟分段）</h1>
        <div class="controls">
            <button id="refreshBtn">刷新数据</button>
            <button id="simulateBtn">模拟新数据</button>
            <button id="resetZoomBtn">重置缩放</button>
        </div>
        <div id="chart" class="chart-container"></div>
        <div class="status">
            数据最后更新时间: <span id="updateTime">--:--:--</span> | 
            当前分段: <span id="currentSegment">--:--</span>
        </div>
        <div class="data-zoom-info">使用鼠标滚轮缩放或拖动滑块查看不同时间段的数据</div>
    </div>

    <script>
        // 初始化ECharts实例
        const chartDom = document.getElementById('chart');
        const myChart = echarts.init(chartDom);
        
        // 全局变量
        let transactionData = {
            segments: [],   // 10分钟分段 ['00:00', '00:10', ...]
            success: [],    // 成功笔数
            fail: []        // 失败笔数
        };
        
        let lastUpdateTime = null; // 记录最后更新时间
        let dataUpdateInterval = null; // 数据更新定时器
        let dayCheckInterval = null;  // 日期检查定时器
        let dataZoomStart = 0; // DataZoom起始位置
        let dataZoomEnd = 100; // DataZoom结束位置
        let autoScrollEnabled = true; // 是否启用自动滚动
        
        // 生成10分钟分段序列（从00:00到当前时间）
        function generate10MinSegments() {
            const now = new Date();
            const currentHour = now.getHours();
            const currentMinute = now.getMinutes();
            
            // 计算当前时间所属的10分钟分段
            const currentSegmentMinute = Math.floor(currentMinute / 10) * 10;
            
            const segments = [];
            
            // 生成从00:00到当前时间分段的10分钟分段
            for (let hour = 0; hour <= currentHour; hour++) {
                // 确定当前小时的最大分钟分段
                const maxSegment = (hour === currentHour) ? currentSegmentMinute : 50;
                
                for (let minute = 0; minute <= maxSegment; minute += 10) {
                    const segmentStr = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
                    segments.push(segmentStr);
                }
            }
            
            return segments;
        }
        
        // 根据当前时间获取对应的10分钟分段
        function getCurrentSegment() {
            const now = new Date();
            const hour = now.getHours();
            const minute = Math.floor(now.getMinutes() / 10) * 10;
            return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
        }
        
        // 模拟从后台获取数据（实际应用中应替换为真实的API调用）
        function fetchTransactionData() {
            return new Promise((resolve) => {
                // 模拟API延迟
                setTimeout(() => {
                    const segments = generate10MinSegments();
                    const success = [];
                    const fail = [];
                    
                    // 生成模拟数据
                    let prevSuccess = 0;
                    let prevFail = 0;
                    
                    for (let i = 0; i < segments.length; i++) {
                        // 生成递增的模拟数据，更符合实际场景
                        const successIncrement = Math.floor(Math.random() * 50) + 10;
                        const failIncrement = Math.floor(Math.random() * 10) + 1;
                        
                        prevSuccess += successIncrement;
                        prevFail += failIncrement;
                        
                        success.push(prevSuccess);
                        fail.push(prevFail);
                    }
                    
                    resolve({ segments, success, fail });
                }, 500);
            });
        }
        
        // 获取最新数据（模拟每分钟查询）
        function fetchLatestData() {
            return new Promise((resolve) => {
                setTimeout(() => {
                    const now = new Date();
                    const currentSegment = getCurrentSegment();
                    
                    // 如果当前分段已存在，则更新数据；否则添加新分段
                    const index = transactionData.segments.indexOf(currentSegment);
                    
                    if (index !== -1) {
                        // 更新分段的成功和失败笔数（模拟增量数据）
                        transactionData.success[index] += Math.floor(Math.random() * 5) + 1;
                        transactionData.fail[index] += Math.floor(Math.random() * 2);
                    } else {
                        // 添加新分段
                        transactionData.segments.push(currentSegment);
                        
                        // 基于最后一条数据生成新数据
                        const lastSuccess = transactionData.success.length > 0 ? 
                            transactionData.success[transactionData.success.length - 1] : 0;
                        const lastFail = transactionData.fail.length > 0 ? 
                            transactionData.fail[transactionData.fail.length - 1] : 0;
                        
                        transactionData.success.push(lastSuccess + Math.floor(Math.random() * 10) + 5);
                        transactionData.fail.push(lastFail + Math.floor(Math.random() * 3) + 1);
                    }
                    
                    resolve({
                        segment: currentSegment,
                        success: transactionData.success[transactionData.success.length - 1],
                        fail: transactionData.fail[transactionData.fail.length - 1]
                    });
                }, 300);
            });
        }
        
        // 计算DataZoom的起始和结束位置
        function calculateDataZoomRange() {
            const dataLength = transactionData.segments.length;
            
            if (dataLength <= 12) {
                // 如果数据量小于12个分段（2小时），显示全部数据
                return { start: 0, end: 100 };
            } else {
                // 显示最后12个数据分段（2小时的数据）
                const start = ((dataLength - 12) / dataLength) * 100;
                return { start, end: 100 };
            }
        }
        
        // 更新图表
        function updateChart() {
            // 如果启用了自动滚动，计算DataZoom范围
            let zoomRange = { start: dataZoomStart, end: dataZoomEnd };
            if (autoScrollEnabled) {
                zoomRange = calculateDataZoomRange();
                dataZoomStart = zoomRange.start;
                dataZoomEnd = zoomRange.end;
            }
            
            // 生成X轴标签（每小时显示一个标签）
            const xAxisLabels = [];
            for (let i = 0; i < transactionData.segments.length; i++) {
                const segment = transactionData.segments[i];
                const minute = segment.split(':')[1];
                
                // 只在整点（分钟为00）显示标签
                if (minute === '00') {
                    xAxisLabels.push(segment);
                } else {
                    xAxisLabels.push('');
                }
            }
            
            const option = {
                title: {
                    text: '当日分时交易量统计（10分钟分段）',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    },
                    formatter: function(params) {
                        let result = params[0].axisValue + '<br/>';
                        params.forEach(function(item) {
                            result += item.marker + item.seriesName + ': ' + item.value + ' 笔<br/>';
                        });
                        return result;
                    }
                },
                legend: {
                    data: ['成功笔数', '失败笔数'],
                    top: 30
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '12%',
                    containLabel: true
                },
                dataZoom: [
                    {
                        type: 'inside',
                        xAxisIndex: 0,
                        start: zoomRange.start,
                        end: zoomRange.end,
                        zoomOnMouseWheel: true,
                        moveOnMouseWheel: true,
                        preventDefaultMouseMove: false
                    },
                    {
                        type: 'slider',
                        xAxisIndex: 0,
                        start: zoomRange.start,
                        end: zoomRange.end,
                        bottom: '3%',
                        height: 20,
                        handleSize: '100%',
                        showDetail: false
                    }
                ],
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: transactionData.segments,
                    axisLabel: {
                        formatter: function(value, index) {
                            // 只在整点（分钟为00）显示标签
                            const minute = value.split(':')[1];
                            return minute === '00' ? value : '';
                        },
                        rotate: 45
                    },
                    axisTick: {
                        alignWithLabel: true,
                        interval: function(index, value) {
                            // 只在整点显示刻度
                            const minute = value.split(':')[1];
                            return minute === '00';
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '笔数'
                },
                series: [
                    {
                        name: '成功笔数',
                        type: 'line',
                        data: transactionData.success,
                        smooth: true,
                        lineStyle: {
                            width: 3
                        },
                        itemStyle: {
                            color: '#52c41a'
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(82, 196, 26, 0.3)'
                                }, {
                                    offset: 1, color: 'rgba(82, 196, 26, 0.05)'
                                }]
                            }
                        }
                    },
                    {
                        name: '失败笔数',
                        type: 'line',
                        data: transactionData.fail,
                        smooth: true,
                        lineStyle: {
                            width: 3
                        },
                        itemStyle: {
                            color: '#f5222d'
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(245, 34, 45, 0.3)'
                                }, {
                                    offset: 1, color: 'rgba(245, 34, 45, 0.05)'
                                }]
                            }
                        }
                    }
                ]
            };
            
            myChart.setOption(option, true);
            
            // 监听dataZoom事件，当用户手动调整时禁用自动滚动
            myChart.off('dataZoom');
            myChart.on('dataZoom', function(params) {
                if (params.batch) {
                    dataZoomStart = params.batch[0].start;
                    dataZoomEnd = params.batch[0].end;
                } else {
                    dataZoomStart = params.start;
                    dataZoomEnd = params.end;
                }
                
                // 如果用户手动调整了缩放，暂时禁用自动滚动
                if (!autoScrollEnabled) return;
                
                const currentRange = calculateDataZoomRange();
                // 如果用户调整的范围与自动滚动的范围相差较大，则禁用自动滚动
                if (Math.abs(dataZoomStart - currentRange.start) > 5 || 
                    Math.abs(dataZoomEnd - currentRange.end) > 5) {
                    autoScrollEnabled = false;
                }
            });
        }
        
        // 初始化数据并渲染图表
        async function initializeChart() {
            try {
                const data = await fetchTransactionData();
                transactionData = data;
                lastUpdateTime = new Date();
                
                // 重置DataZoom到默认位置
                autoScrollEnabled = true;
                updateChart();
                updateStatus();
                
                // 开始定时更新数据（每分钟一次）
                startDataUpdate();
                
                // 开始日期检查
                startDayCheck();
            } catch (error) {
                console.error('初始化数据失败:', error);
            }
        }
        
        // 开始定时更新数据（每分钟一次）
        function startDataUpdate() {
            // 清除之前的定时器
            if (dataUpdateInterval) {
                clearInterval(dataUpdateInterval);
            }
            
            // 每分钟更新一次数据
            dataUpdateInterval = setInterval(async () => {
                try {
                    await fetchLatestData();
                    lastUpdateTime = new Date();
                    updateChart();
                    updateStatus();
                } catch (error) {
                    console.error('更新数据失败:', error);
                }
            }, 60000); // 每分钟更新一次
        }
        
        // 开始日期检查
        function startDayCheck() {
            // 清除之前的定时器
            if (dayCheckInterval) {
                clearInterval(dayCheckInterval);
            }
            
            // 每分钟检查一次是否到了第二天00:00
            dayCheckInterval = setInterval(() => {
                const now = new Date();
                if (now.getHours() === 0 && now.getMinutes() < 10) { // 在00:00-00:10之间重置
                    // 到了第二天00:00，重置数据
                    resetData();
                }
            }, 60000); // 每分钟检查一次
        }
        
        // 重置数据（第二天00:00时调用）
        function resetData() {
            transactionData = {
                segments: [],
                success: [],
                fail: []
            };
            
            // 重新初始化图表
            initializeChart();
            alert('已进入新的一天，数据已重置！');
        }
        
        // 更新状态显示
        function updateStatus() {
            if (lastUpdateTime) {
                const timeStr = lastUpdateTime.toTimeString().split(' ')[0];
                document.getElementById('updateTime').textContent = timeStr;
                
                // 更新当前分段显示
                const currentSegment = getCurrentSegment();
                document.getElementById('currentSegment').textContent = currentSegment;
            }
        }
        
        // 模拟新数据（用于演示）
        async function simulateNewData() {
            try {
                await fetchLatestData();
                lastUpdateTime = new Date();
                updateChart();
                updateStatus();
                alert('已添加模拟数据！');
            } catch (error) {
                console.error('模拟数据失败:', error);
            }
        }
        
        // 重置DataZoom到自动滚动状态
        function resetDataZoom() {
            autoScrollEnabled = true;
            updateChart();
            alert('已重置缩放，将自动跟随最新数据滚动');
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            initializeChart();
            
            // 绑定按钮事件
            document.getElementById('refreshBtn').addEventListener('click', initializeChart);
            document.getElementById('simulateBtn').addEventListener('click', simulateNewData);
            document.getElementById('resetZoomBtn').addEventListener('click', resetDataZoom);
            
            // 窗口大小变化时重绘图表
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        });
    </script>
</body>
</html>